<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>React Document</title>
</head>
<body>
  <div id="count"></div>
  <div id="A"></div>
  <script src='../js/react.development.js'></script>
  <script src='../js/react-dom.development.js'></script>
  <script src='../js/babel.min.js'></script>
  <script type='text/babel'>
    // 旧的生命周期
    class Count extends React.Component {
      constructor(props) {
        console.log('count constructor');
        super(props)
        this.state = {
          count: 0
        }
      }

      handleClick = () => {
        let {count} = this.state
        count++
        this.setState({count: count})
      }
      handleUnmount = () => {
        // 卸载组件
        ReactDOM.unmountComponentAtNode(document.getElementById('count'))
      }
      static getDerivedStateFromProps(props) {
        console.log('count getDerivedStateFromProps')
        // state的值永远取决于props 可能导致代码冗余组件难以维护
        // return props
        return null
      }
      getSnapshotBeforeUpdate() {
        console.log('count getSnapshotBeforeUpdate');
        return null
      }
      // render之后执行
      componentDidMount() {
        console.log('count componentDidMount');
      }
      // 由setState触发 返回true才更新 返回false不更新
      shouldComponentUpdate() {
        console.log('count shouldComponentUpdate setState is called')
        return true
      }
      // render之后执行
      componentDidUpdate(preProps, preState, snapshotValue) {
        console.log('count componentDidUpdate')
        console.log('preProps:',preProps,'preState', preState, 'snapshotValue', snapshotValue);
      }
      // 初始化和更新的时候执行 1+n
      render() {
        console.log('count render');
        return (
          <div>
            <h1>当前值：{this.state.count}</h1>
            <button onClick={this.handleClick}>点击</button>
            <button onClick={this.handleUnmount}>卸载组件</button>
            {/*不执行shouldComponentUpdate*/}
            <button onClick={() => {this.forceUpdate()}}>强制更新</button>
          </div>
        )
      }
    }
    ReactDOM.render(<Count/>, document.getElementById('count'))

    // 父子组件生命周期
    class A extends React.Component {
      state = {carName: 'BMW'}
      render() {
        return (
          <div>
            <div>我是A爸</div>
            {/*传递新的props的时候才执行componentWillReceiveProps*/}
            <button onClick={() => {this.setState({carName: '奥迪'})}}>换车</button>
            {/*第一次接收的props不执行componentWillReceiveProps*/}
            <B carName={this.state.carName}/>
          </div>
        )
      }
    }
    class B extends React.Component {
      render() {
        return (
          <div>我是B子，我拿到的车是{this.props.carName}</div>
        )
      }
    }
    ReactDOM.render(<A/>, document.getElementById("A"))
  </script>
</body>
</html>
<!--
  移除了三个will
  挂载
  constructor
  getDerivedStateFromProps【新增】
  shouldComponentUpdate
  render
  componentDidMount
  更新
  getDerivedStateFromProps
  shouldComponentUpdate
  render
  getSnapshotBeforeUpdate【新增】在最近一次渲染输出之前俺调用捕获更改之前的信息，返回值会传递给componentDidUpdate
  componentDidUpdate
  卸载
  componentWillUnmount
 -->